<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="perch"></view>
		<!-- #endif -->
		<view class="main">
			<view class="banner">
				<u-icon name="arrow-left" color="#F9F9F8" size="56" @tap="toMineCenter" ></u-icon>
				<view class="user">
					<image class="img" src="@/static/slice.png" mode=""></image>
					<view class="userinfo">
						<u-avatar :src="userInfo.face" size="152"></u-avatar>
						<view class="user_status">
							<view class="username">
								<text>{{userInfo.nickName}}</text>
								<image class="crown" src="@/static/crown.png" v-if="isPostpone"></image>
								<image class="crown" src="@/static/crown1.png" v-else></image>
							</view>
							<view class="member_status">
								<text v-if="isPostpone">您的会员还有 {{isPostpone}} 天到期</text>
								<text v-else>开通PLUS   畅享商品大折扣</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="member_menu">
				<view class="title">
					<text>PLUS充值</text>
				</view>
				<view class="menu">
					<view class="item" 
					:class="{active:goods_id === item.plusType}" 
					v-for="item in member_goods" :key="item.plusType"
					@tap="goods_id = item.plusType">
						<view class="time" >
							<text>{{plusType[item.plusType]}}</text>
						</view>
						<view class="price">
							<text>￥</text>
							<text class="money">{{item.price}}</text>
						</view>
					</view>
				</view>
				<view class="tips">
					<text>到期可立即续费</text>
				</view>
			</view>
		</view>
		<view class="order_desc">
			<view class="desc">
				<view class="price">
					<text class="total">总计:</text>
					<text class="tip">￥{{order.price}}</text>
				</view>
				<view class="deal">
					<text>开通即接受</text>
					<text class="tip" @tap="toMemberTip">《PLUS会员用户协议》</text>
				</view>
			</view>
			<view class="pay_btn" @tap="payHandle">立即购买</view>
		</view>
		<u-popup v-model="isShow" mode="bottom">
			<payModal :isShow="isShow" :info="order" @closeHandle="closeHandle"></payModal>
		</u-popup>
	</view>
</template>

<script>
	import { getPlusListAsync } from "@/api/goods.js"
	export default {
		data() {
			return {
				isPostpone:0,
				userInfo:{},
				member_goods:[],
				goods_id:"0",
				isShow:false,
				plusType:{
					"0":"月卡",
					"1":"季卡",
					"2":"年卡",
				}
			};
		},
		onLoad(option){
			this.isPostpone = parseInt(option.time)
		},
		onShow() {
			this.userInfo = this.$options.filters.isLogin();
			this.getPlusList()
		},
		onPullDownRefresh() {
		  this.userInfo = this.$options.filters.isLogin();
		},
		computed:{
			order(){
				if(this.member_goods.length){
					return this.member_goods.find(item=> item.plusType === this.goods_id)
				}
				return {price:0}
			}
		},
		methods:{
			async getPlusList(){
				const {data} = await getPlusListAsync()
				if(data.code === 200){
					console.log(data.result);
					this.member_goods = data.result
				}
			},
			toMineCenter(){
				uni.navigateTo({
					url:"/pages/shop/pages/tabbar/user/my"
				})
			},
			toMemberTip(){
				uni.navigateTo({
					url:"/pages/shop/pages/mine/memberTips/memberTips"
				})
			},
			// 点击支付
			payHandle() {
				this.isShow = true;
			},
			//取消支付
			closeHandle(val) {
				console.log(val);
				this.isShow = false;
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
.perch{
		width: 100%;
		height: 56rpx;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}
	.main{
		position: relative;
		left: 0;
		/* #ifdef APP-PLUS */
		top: 56rpx;
		/* #endif */
		
	}
	.banner{
		width: 100%;
		height: 398rpx;
		background-color: #161616;
		background-orgin: padding-box;
		padding: 114rpx 32rpx 0;
		position: relative;
		.user{
			width: 647rpx;
			height: 267rpx;
			margin: 0 auto;
			position: absolute;
			left: 54rpx;
			bottom: -98rpx;
			padding: 55rpx;
			display: flex;
			align-items: center;
			z-index: 1;
			.img{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
			.userinfo{
				display: flex;
				align-items: center;
				.user_status{
					z-index: 2;
					margin-left: 22rpx;
					.username{
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						color: #FEE7CA;
						margin-bottom: 22rpx;
						.crown{
							width: 28rpx;
							height: 28rpx;
							margin-left: 22rpx;
						}
					}
					.member_status{
						color: #C5A26C;
						font-size: 24rpx;
					}
				}
			}
		}
	}
	.member_menu{
		margin: 142rpx 32rpx 0;
		color: #2D2D2D;
		.title{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			margin-bottom: 40rpx;
		}
		.menu{
			display: flex;
			justify-content: space-between;
			margin-bottom: 34rpx;
			.item{
				width: 224rpx;
				height: 264rpx;
				border: 1px solid #EEEEEE;
				box-shadow: 0px 9px 21px 0px rgba(226,226,226,0.8);
				border-radius: 10px;
				text-align: center;
				transition:border 1s,box-shadow 2s;
				&:active{
					border: 1px solid #D39B53;
					box-shadow: 0px 0px 21px 4px #E9DCCA;
				}
				
				.time{
					width: 100%;
					font-size: 24rpx;
					margin: 60rpx 0 32rpx;
				}
				.price{
					color: #E4B173;
					.money{
						font-size: 38rpx;
					}
				}
			}
			.active{
				border: 1px solid #D39B53;
				box-shadow: 0px 0px 21px 4px #E9DCCA;
			}
		}
		.tips{
			height: 66rpx;
			background: #FFF5E2;
			border-radius: 10rpx;
			font-size: 24rpx;
			color: #C5A26C;
			line-height: 66rpx;
			padding-left: 22rpx;
		}
	}
	.order_desc{
		width: 100%;
		height: 110rpx;
		background: #F9F9F8;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		bottom: 0;
		left: 0;
		.desc{
			flex: 1;
			padding-left: 32rpx;
			color: #A8A8A8;
			font-size: 22rpx;
			.price{
				color: #333333;
				font-size: 32rpx;
				margin-bottom: 18rpx;
			}
			.tip{
				color: #FF5C58;
			}
		}
		.pay_btn{
			width: 241rpx;
			height: 110rpx;
			background: linear-gradient(0deg, #FFD389, #E4A14C);
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 110rpx;
			text-align: center;
		}
	}
</style>
